<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>使用者辭庫編輯 - 新酷音輸入法</title>
    <link rel="icon" type="image/x-icon" href="images/phrase_editor.ico">
    <link rel="stylesheet" href="js/jquery-ui-1.13.2/jquery-ui.min.css">
    <link rel="stylesheet" href="js/jquery-ui-1.13.2/jquery-ui.theme.min.css">
    <link rel="stylesheet" href="css/sweetalert2.min.css">
    <link rel="stylesheet" href="css/user_phrase.css">
</head>

<body>
    <div id="user_phrase_buttons">
        <button id="add">📝 新增自訂詞彙</button>
        <button id="remove">⛔ 刪除選取詞彙<span id="delete_count"></span></button>
        <button id="reload">🔁 重新載入</button>
        <hr>
        <button id="import">📥 匯入詞庫</button>
        <button id="export">⬇️ 下載辭庫</button>
        <strong id="phrase_count"></strong>
    </div>
    <form action="/user_phrase_file" enctype="multipart/form-data" method="post" id="import_user_phrase_form">
        <input type="file" name="import_user_phrase" id="import_user_phrase" accept=".sqlite3" style="display:none;">
    </form>
    <div id="top_box">
        <table id="phrase_table">
            <thead>
                <tr>
                    <th id="phrase">
                        <input type="checkbox" name="select_all" id="select_all">詞彙
                    </th>
                    <th id="bopomofo">注音</th>
                </tr>
            </thead>
            <!-- Phrase table content inserted by javascript -->
            <tbody id="table_content"></tbody>
        </table>

        <!-- Add new phrase dialog -->
        <div id="add_dialog" title="新增自訂詞彙">
            <label for="phrase_input">請輸入字詞：</label><br>
            <input name="phrase_input" type="text" id="phrase_input" size="50" tabindex="1" /><br>
            <label for="bopomofo_input">對應的注音：</label><br>（每個字的注音之間要以空格區別，例如<span class="bopomofo_display">ㄈㄢˋ_ㄌㄧˋ</span>）
            <br>
            <input name="bopomofo_input" class="bopomofo_display" type="text" id="bopomofo_input" size="22" tabindex="2" placeholder="切換到英數模式可輸入注音" />
        </div>

        <!-- jQuery UI alert-->
        <div id="jquery_alert" style="display: none;"></div>
    </div>

    <script src="js/jquery-3.7.1.min.js"></script>
    <script src="js/jquery-ui-1.13.2/jquery-ui.min.js"></script>
    <script src="js/jquery-loading-overlay-2.1.7/loadingoverlay.min.js"></script>
    <script src="js/user_phrase.js"></script>
</body>

</html>